<template>
	<view>
		<cu-custom slot="top" :isBack="true" :bgColor="'bg-'+ theme.themeColor">
			<block slot="backText">返回</block>
			<block slot="content">发表评论</block>
		</cu-custom>
		<view v-for="(item,index) in appraiseList" class="bg-white padding-sm">
			<view class="cu-card article no-card">
				<view class="cu-item shadow">
					<view class="content">
						<image :src="item.picUrl" mode="aspectFill"></image>
						<view class="desc">
							<view class="text-content"> {{item.spuName}}</view>
							<view>
								<view>{{item.specsInfo}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="flex align-center">
				<text class="text-bold">商品评价</text>
				<uni-rate :value="item.goodsScore" color="#bbb" active-color="red" />
			</view>
			<view class="padding-tb">
				<textarea maxlength="-1" :data-index="index" @input="textareaAInput" placeholder="请输入评价内容"></textarea>
			</view>
			<view class="cu-bar bg-white margin-top">
				<view class="action">
					图片上传
				</view>
				<view class="action">
					{{item.picUrls.length}}/6
				</view>
			</view>
			<view class="cu-form-group">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(picItem,picIndex) in item.picUrls" :key="picIndex" @tap="viewImage"
						:data-url="item.picUrls[picIndex]" :data-pindex="index">
						<image :src="item.picUrls[picIndex]" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-pindex="index" :data-index="picIndex">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="chooseImage(index)" v-if="item.picUrls.length<6">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>

		</view>
		<view class="ccu-bar bg-white tabbar border shop foot">
			<button class="cu-btn shadow-blur block margin-sm round bottom-btn" :class="'bg-'+ theme.themeColor"
				@tap="addSub">确认发表</button>
		</view>
	</view>
</template>

<script>
	import config from 'config/env';
	import {
		getById
	} from '@/api/orderinfo.js';
	import {
		addObj
	} from '@/api/goodsappraise.js';
	import {
		getToken
	} from '@/utils/auth'
	export default {
		data() {
			return {
				theme: getApp().globalData.theme,
				orderInfo: {},
				imgList: [],
				appraiseList: []
			}
		},
		onLoad(option) {
			getApp().initPage().then(res => {
				this.getOrderDetail(option.id)
			})
		},
		methods: {
			getOrderDetail(id) {
				getById(id).then(res => {
					const _this = this;
					this.orderInfo = res.data
					this.appraiseList = []
					if (this.orderInfo) {
						this.orderInfo.orderItemList.forEach(item => {
							_this.appraiseList.push({
								picUrl: item.picUrl,
								spuName: item.spuName,
								specsInfo: item.specsInfo,
								spuId: item.spuId,
								orderId: item.orderId,
								orderItemId: item.id,
								picUrls: [],
								goodsScore: 5,
								content: ""
							})
						})
					}
				})
			},
			chooseImage(index) {
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						tempFilePaths.forEach(irem => {
							this.uploadFile(irem, index);
						})

					}
				});
			},
			uploadFile(filePath, index) {
				let rquestUrl = config.basePath + '/mallapi/file/upload'
				let _this = this
				uni.uploadFile({
					header: {
						'hx-token': getToken() ? getToken() : null, // 请求token
						'timestamp': new Date().getTime(),
						//#ifdef MP-WEIXIN
						'client-type': 'WX-MA', //客户端微信小程序
						'app-id': uni.getAccountInfoSync().miniProgram.appId, //小程序appId
						//#endif
						//#ifdef APP-PLUS
						'client-type': 'APP', //客户端类型APP
						//#endif
						//#ifdef H5
						'client-type': 'H5', //客户端H5
						//#endif
						//#ifdef MP-ALIPAY
						'client-type': 'ALI-MA', //客户端支付宝小程序
						'app-id': config.aliAppId, //小程序appId
						//#endif
					},
					url: rquestUrl,
					filePath: filePath,
					name: 'file',
					formData: {
						'fileType': 'image'
					},
					success: (uploadFileRes) => {
						let data = JSON.parse(uploadFileRes.data);
						this.appraiseList[index].picUrls.push(data.data)
					}
				});
			},
			viewImage(e) {
				uni.previewImage({
					urls: this.appraiseList[e.currentTarget.dataset.pindex].picUrls,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				const _this = this;
				uni.showModal({
					title: '删除',
					content: '确定要删除图片吗？',
					cancelText: '再看看',
					confirmText: '再见',
					success: res => {
						console.log(e.currentTarget.dataset)
						if (res.confirm) {
							_this.appraiseList[e.currentTarget.dataset.pindex].picUrls.splice(e.currentTarget
								.dataset
								.index, 1)
						}
					}
				})
			},
			textareaAInput(e) {
				this.appraiseList[e.currentTarget
					.dataset
					.index].content = e.detail.value;
			},
			addSub() {
				if (this.appraiseList.length > 0) {
					addObj(this.appraiseList).then(response => {
						uni.showToast({
							title: '发表评论成功',
							icon: 'success',
							duration: 2000
						});
						uni.navigateTo({
							url: '/pages/user/user-appraise/index'
						})
					})
				}

			}
		}
	}
</script>

<style>

</style>
